<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ page language="java" import="com.qdairlines.entity.user.User" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
    User user = (User) request.getSession().getAttribute("currentUser");
%>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>异常航班</title>

    <link rel="shortcut icon" href="favicon.ico">
    <link href="<%=basePath %>/hplus/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="<%=basePath %>/hplus/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="<%=basePath %>/hplus/css/animate.css" rel="stylesheet">
    <link href="<%=basePath %>/hplus/css/style.css?v=4.0.0" rel="stylesheet">
    <base target="_blank">

    <link href="<%=basePath %>/hplus/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="<%=basePath %>/hplus/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

</head>

<body class="gray-bg">

<div class="wrapper wrapper-content " id="content">

    <div class="modal inmodal fade" id="msgTemplateModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-md">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span
                            aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">短信模板选择</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">模板选择</label>
                            <div class="col-sm-10">
                                <select class="form-control m-b" name="account">
                                    <option>模板 1</option>
                                    <option>模板 2</option>
                                    <option>模板 3</option>
                                    <option>模板 4</option>
                                </select>
                            </div>
                        </div>
                        <div class="well">
                            【九部令人拍案叫绝的惊悚悬疑剧情佳作】如果你喜欢《迷雾》《致命ID》《电锯惊魂》《孤儿》《恐怖游轮》这些好片，那么接下来推荐的9部同类题材并同样出色的的电影，绝对不可错过哦~
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="vue.refreshExPassengers()">
                        确定
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <form class="form-horizontal m-t">
            <div class="col-sm-12 col-md-6 col-lg-4">
                <div class="form-group">
                    <label class="col-sm-3 control-label">航班号:</label>
                    <div class="col-sm-8">
                        <input v-model="flightNo" minlength="2" type="text"
                               class="form-control" required="" aria-required="true" placeholder="请输入航班号">
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-4">
                <div class="form-group">
                    <label class="col-sm-3 control-label">航班日期：</label>
                    <div class="col-sm-8">
                        <input v-model="flightDate" class="laydate-icon form-control layer-date" readonly="readonly"
                               style="max-width: 720px;">
                    </div>
                </div>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-4">
                <div class="form-group" class="col-sm-12 col-md-6 col-lg-4">
                    <label class="col-xs-0 col-sm-3 control-label"></label>
                    <div class="col-xs-6 col-sm-5">
                        <a class="btn btn-primary" @click="getExFregments()">查询航班</a>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default" v-for="(fregment, index) in fregments" :key="index">
            <div class="panel-heading" role="tab" id="headingOne">
                <a role="button" data-toggle="collapse" data-parent="#accordion"
                   v-bind:href="fregment.collapseHref" aria-expanded="false"
                   v-bind:aria-controls="fregment.collapseId">
                    <div class="row">
                        <div class="col-md-5">
                                <span class="faq-question" v-cloak>
                                    {{fregment.status}}
                                </span>
                            <small><strong></strong> {{fregment.reason}}</small>
                        </div>
                        <div class="col-md-3">
                            <span class="font-bold"><strong>{{fregment.flightNo}}</strong> </span>
                            <div class="tag-list">
                                <span class="tag-item">{{fregment.depCity}}</span>
                                <i class="fa fa-plane"></i>
                                <span class="tag-item">{{fregment.arrCity}}</span>
                            </div>
                        </div>
                        <%--<div class="col-md-2 text-right">
                            <span class="small font-bold">投票 </span>
                            <br/>42
                        </div>--%>
                        <%--<div class="col-sm-12 col-md-4 col-lg-3" v-cloak>
                            <span class="faq-question" v-cloak>
                                {{fregment.status}} <span class="font-bold"
                                                          style="color: #106D5A;font-size: 15px" v-cloak
                                                          v-html="fregment.reason"></span>
                            </span>
                        </div>--%>
                    </div>
                </a>
            </div>
            <div v-bind:id="fregment.collapseId" class="panel-collapse collapse " role="tabpanel"
                 aria-labelledby="headingOne">
                <div class="panel-body table-responsive">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="example">
                                <div id="customToolBar">
                                    <button v-bind:id="fregment.confirm" class="btn btn-primary" disabled>发送短信通知
                                    </button>
                                </div>
                                <table v-bind:id="fregment.tableId"
                                       v-bind:data-toggle="fregment.tableId">
                                    <thead>
                                    <tr>
                                        <th data-field="checkState" data-checkbox="true"></th>
                                        <th data-field="seatNo" data-filter-control="select">座位号</th>
                                        <th data-field="psgNameCn" data-filter-control="input">姓名</th>
                                        <th data-field="etIdNum">证件号</th>
                                        <th data-field="telNum">联系方式</th>
                                    </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="<%=basePath %>/hplus/js/jquery.min.js?v=2.1.4"></script>
<script src="<%=basePath %>/hplus/js/bootstrap.min.js?v=3.3.5"></script>

<!-- 自定义js -->
<script src="<%=basePath %>/hplus/js/content.js?v=1.0.0"></script>


<script src="<%=basePath %>/hplus/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="<%=basePath %>/hplus/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="<%=basePath %>/hplus/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="<%=basePath %>/hplus/js/plugins/layer/laydate/laydate.js"></script>
<script src="<%=basePath %>/hplus/js/plugins/sweetalert/sweetalert.min.js"></script>

<script src="<%=basePath %>/hplus/js/constant.js"></script>
<script src="<%=basePath %>/hplus/js/utils.js"></script>
<script src="<%=basePath %>/hplus/js/vue/vue.js"></script>
<script>


    var vue = new Vue({
        el: '#content',
        data: {
            flightNo: "QW9808",//航班编号
            flightDate: laydate.now(0, 'YYYY-MM-DD'),//航班时间
            fregments: [],//航段列表
            fregment: "",//当前航段
        },
        mounted: function () {
            _self = this;
            laydate({
                elem: '#flightDate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
                event: 'focus', //响应事件。如果没有传入event，则按照默认的click
                format: 'YYYY-MM-DD',
                istoday: true, //是否显示今天
                choose: function (datas) {
                    _self.flightDate = datas;//手动更新vue变量
                }
            });
            $('#flightDate').val(laydate.now(0, 'YYYY-MM-DD'));
        },
        methods: {
            //点击查询不正常航段
            getExFregments: function () {
                if (!this.flightNo) {
                    warningAlert("航班号不能为空!");
                    return false;
                }
                if (!this.flightDate) {
                    warningAlert("航班日期不能为空!");
                    return false;
                }
                //自动补全航班号
                this.flightNo = this.flightNo.toUpperCase();
                if (this.flightNo.charAt(0) != 'Q') {
                    this.flightNo = "QW" + this.flightNo;
                }
                this.fregments.forEach(function (fregment, index, array) {
                    $('#' + fregment.tableId).bootstrapTable('load', []);
                });
                var _self = this;
                $.ajax({
                    url: '<%=basePath %>/exFlights.do',
                    data: {
                        flightDate: this.flightDate,
                        flightNo: this.flightNo,
                    },
                    type: 'get',
                    dataType: 'json',
                    success: function (data) {
                        if (data.status == 1) {
                            var result = data.result;
                            //增加collapse关联
                            result.forEach(function (value, index, array) {
                                //table的动态变量赋值
                                value.collapseHref = "#collapseOne" + index;
                                value.collapseId = "collapseOne" + index;
                                value.tableId = "passengerTable" + index;
                                value.confirm = "confirm" + index;
                                value.index = index;
                            });
                            _self.fregments = result;
                            setTimeout("_self.tableInit(_self.fregments)", 500);//延迟5秒，等待表格动态变量初始化完毕
                        } else {
                            _self.fregments = [];
                            exceptionAlert(data);
                        }
                    },
                    error: function (obj) {
                        _self.fregments = [];
                        errorAlert("服务器无响应");
                        return false;
                    }
                })
            },
            //初始化表格，获取数据
            tableInit: function (fregments) {
                var _self = this;
                fregments.forEach(function (fregment, index, array) {
                    $('#' + fregment.tableId).bootstrapTable({});
                    var $table = $('#' + fregment.tableId),
                            $confirm = $('#' + fregment.confirm);
                    //获取乘客列表
                    $.ajax({
                        type: "get",
                        url: BASE_URL + '/departPassengers',
                        data: {
                            flt_num: _self.flightNo,
                            flt_date: _self.flightDate,
                            orig_airport: fregment.depCode,
                            dest_airport: fregment.arrCode,
                        },
                        dataType: 'json',
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            if (data.status == 1) {
                                var result = data.result;
                                if (!result || !result.lenght == 0) {
                                    warningAlert("未查询到旅客");
                                } else {
                                    result.forEach(function (value, index, array) {
                                        value.checkState = false;
                                    })
                                    $('#' + fregment.tableId).bootstrapTable('load', result);
                                }
                            } else {
                                exceptionAlert(data);
                            }
                            _self.isLoading = false;
                        },
                        error: function (obj) {
                            errorAlert("服务器无响应");
                            _self.isLoading = false;
                            return false;
                        }
                    });

                    //一旦有选中，使能按钮
                    $table.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', function () {
                        $confirm.prop('disabled', !$table.bootstrapTable('getSelections').length);
                    });
                    //确认发送短信
                    $confirm.click(function () {
                        _self.fregment=fregment;
                        var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
                            return row.psgNameCn;
                        });
                        var idsStr = "";
                        ids.forEach(function (value, index, array) {
                            idsStr += value + ",";//选中的ID拼接为一个字符串
                        })
                        $('#msgTemplateModal').modal("toggle",true);
                        $confirm.prop('disabled', true);
                    });
                })
            },
            //发送短信后重新加载旅客表格数据
            refreshExPassengers: function () {
                $('#' + this.fregment.tableId).bootstrapTable('load', []);
                var _self = this;
                $.ajax({
                    type: "get",
                    url: BASE_URL + '/departPassengers',
                    data: {
                        flt_num: _self.flightNo,
                        flt_date: _self.flightDate,
                        orig_airport: this.fregment.depCode,
                        dest_airport: this.fregment.arrCode,
                    },
                    async: true,
                    dataType: 'json',
                    contentType: "application/json; charset=utf-8",
                    success: function (data) {
                        if (data.status == 1) {
                            var result = data.result;
                            if (!result || !result.lenght == 0) {
                                warningAlert("未查询到旅客");
                            } else {
                                result.forEach(function (value, index, array) {
                                    value.checkState = false;//checkbox默认置为未选中
                                })
                                $('#' + _self.fregment.tableId).bootstrapTable('load', result);//给表哥赋值
                            }
                        } else {
                            exceptionAlert(data);
                        }
                    },
                    error: function (obj) {
                        errorAlert("服务器无响应");
                        _self.isLoading = false;
                        return false;
                    }
                });
            },
        },
        filters: {
            //截取日期的小时和分钟部分
            hourAndMinGet: function (value) {
                if (!value) return '';
                return value.substring(11, 16);
            }
        },
    });
    /*function showPassengers(value) {
     window.parent.addMenuItem("<%=basePath %>/exFlights/toPage.do", 'argument-view', "乘客列表");
     }*/

    //日期格式化
    function dateFormater(value) {
        var date = replaceDate(value / 1000);
        return date;
    }

    //操作按钮格式化
    function optFormatter(value) {
        //return  '<a class="J_menuItem" href="<%=basePath %>/exFlights/toPage.do" data-index="1000">异常航班</a>'
        return '<button type="button" class="btn btn-w-m btn-primary" onclick="showPassengers( ' + "'" + value + "'" + ')">获取旅客信息</button>';
    }

</script>


</body>

</html>

